<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读清单</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>

    <div id="wrapper">
        <header>
            <div id="page-banner">
                <h1 class="title">阅读清单</h1>
                <p>清单里收纳着全部未来的相遇</p>
                <form id="search-books">
                    <input type="text" placeholder="搜索书籍..." />
                </form>
            </div>
        </header>

        <div id="book-list">
            <h2 class="title">待读书籍</h2>
            <ul>
                <li>
                    <span class="name">西线无战事</span>
                    <span class="delete">删除</span>
                </li>
                <li>
                    <span class="name">新异化的诞生：社会加速批判理论大纲</span>
                    <span class="delete">删除</span>
                </li>
            </ul>
        </div>
        <form id="add-book">
            <input type="checkbox" id="hide" />
            <label for="hide">隐藏所有书籍</label>
            <input type="text" placeholder="添加书籍..." />
            <button>添加</button>
        </form>
        <footer>
            <ul class="tab-buttons">
                <li data-target="#about" class="active">关于清单</li>
                <li data-target="#contact">联系我们</li>
            </ul>
            <div class="tab-content active" id="about">
                <p>阅读清单是一款帮助你管理阅读计划的工具。</p>
                <p>
                    在这里，你可以记录想要阅读的书籍，追踪阅读进度，还能通过搜索快速找到清单中的书籍。无论是经
                    典名著还是热门新书，都可以轻松添加到你的专属阅读清单中，让阅读计划更有条理。
                </p>
            </div>
            <div class="tab-content" id="contact">
                <p>如果你有任何建议或问题，欢迎联系我们：</p>
                <p>
                    邮箱：contact@readinglist.com<br />
                    微信：ReadingListService<br />
                    工作时间：周一至周五 9:00-18:00
                </p>
            </div>
        </footer>
        <div class="block" id="book-list"></div>
        <form class="block" id="add-book"></form>
        <footer class="block"></footer>
    </div>

    <script src="app.js"></script>
</body>

</html>